Ext.define('CDR.view.TariffGroupConfig', {
	extend: 'Ext.form.Panel',
	alias: 'widget.tariff-group-config',
	layout: 'fit',
	border: false,
	buttonAlign: 'center',
	buttons: [{
		name: 'save',
		text: 'Save'
	}],
	items: [{
		xtype: 'tabpanel',
		border: false,
		layout: 'fit',
		items: [{
			xtype: 'panel',
			bodyPadding: 10,
			layout: 'anchor',
			defaults: {
				labelWidth: 90
			},
			title: 'Group Configuration',
			items: [{
				xtype: 'hidden',
				name: 'id'
			},{
				xtype: 'textfield',
				fieldLabel: 'Group Name',
				name: 'name',
				anchor: '100%'
			}, {
				xtype: 'textarea',
				fieldLabel: 'Description',
				name: 'description',
				anchor: '100%'
			}, {
				xtype: 'fieldcontainer',
				fieldLabel: 'OffPeak Time',
				labelAlign: 'top',
				layout: 'fit',
				items:[{
					xtype: 'gridpanel',
					autoScroll: true,
					height: 150, 
					store: Ext.create('Ext.data.Store', {
						fields:[{name: 'id', type: 'int'}, 'starttime', 'endtime', {name: 'discount', type: 'int'}]
					}),
					tbar: [{
						text: 'Add new',
						name: 'add-new',
						iconCls: 'icon-add'
					}],
					columns: [{
						header: 'Start Time',  
						dataIndex:'starttime', 
						menuDisabled: true,
						xtype:'datecolumn', 
						format: 'H:i',
						flex: 1,
						editor: {
							xtype: 'timefield',
							format: 'H:i',
							allowBlank: false,
							increment: 60
						}
					},{
						header: 'End Time',  
						dataIndex:'endtime', 
						menuDisabled: true,
						xtype:'datecolumn', 
						format: 'H:i',
						flex: 1,
						editor: {
							xtype: 'timefield',
							format: 'H:i',
							allowBlank: false,
					        increment: 60
						}
					}, {
						header: 'Discount Percent',  
						dataIndex:'discount', 
						editor: {
							xtype:'textfield',
							allowBlank: false
						},
						menuDisabled: true,
						flex: 1,
						renderer:function(value,style,record){
			    			return value+' %';
			    		}
					},{
						header: 'Delete',  
						xtype: 'actioncolumn',
						sortable: false,
						menuDisabled: true,
						align: 'center',
						width: 50,
						items:[{
		                    icon:'resources/app/images/delete.png',
		                    handler: function(grid, rowIndex, colIndex) {
		                        grid.store.removeAt(rowIndex);
		                    }
		                }]
					}],
					plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
					        clicksToEdit: 2,
					        listeners: {
					        	edit: function(editor, e){
					        	
					        	}
					        }
				    })]
				}]
			},{
				xtype: 'container',
				layout: 'hbox',
				anchor: '100%',
				items:[{
					xtype: 'checkbox',
					boxLabel: 'Holiday Discount Percent',
					inputValue: true,
					name: 'overrideHolidayDiscountValue',
					listeners: {
						change: function(comp, newVal){
							console.log(arguments)
							if(newVal == true) {
								comp.up('container').down('textfield[name=holidayDiscountValue]').enable();
							} else {
								comp.up('container').down('textfield[name=holidayDiscountValue]').disable();
							}
						}
					}
				}, {
					xtype : 'textfield',
					name: 'holidayDiscountValue',
					margin: '0 0 0 5',
					fieldLabel: '',
					width: 50,
					disabled: true,
					labelSeparator: ''
				}, {
					margin: '0 0 0 15',
					xtype: 'fieldcontainer',
					fieldLabel: 'Call Block(s)',
					labelWidth: 80,
					layout: 'hbox',
					flex: 1,
					defaults: {
						xtype: 'textfield',
						width: 90,
						labelWidth: 40,
						margin: '0 0 0 5',
						allowBlank: false
					},
					items:[{
						fieldLabel: 'First',
						name: 'firstBlock'
					},{
						fieldLabel: 'Second',
						name: 'secondBlock'
					}]
				}]
			}, {
				xtype: 'container',
				layout: 'hbox',
				margin: '5 0 0 0',
				defaults:{
					margin: '0 5 0 0',
				},
				items:[{
					xtype: 'combobox',
					fieldLabel: 'Currency',
					name: 'currency',
					labelWidth: 80,
					editable: false,
					store:['VND', 'USD', 'EUR'],
					width: 150,
					value: 'VND'
				},{
					xtype: 'combobox',
					fieldLabel: 'Discount Type',
					name: 'discountType',
					editable: false,
					width: 200,
					store: Ext.create('Ext.data.Store', {
						fields: ['value', 'text'],
						data: [
							{value: 'L', text: 'Lowest price'}, 
							{value: 'H', text: 'Holiday discount'},
							{value: 'O', text: 'Offpeak discount'},
							//{value: 'HO', text: 'Holiday + Offpeak discount'}
						]
					}),
					displayField: 'text',
					valueField:'value',
					value: 'L'
				}]
			}]
		},{
			xtype: 'panel',
			bodyPadding: '20',
			layout: 'anchor',
			title: 'Validation',
			defaults:{
				anchor: '100%'
			},
			items: [{
				xtype: 'fieldset',
				checkboxToggle: true,
				checkboxName: 'useValidation',
				checked: true,
				title: 'Check length of dial number',
				defaultType: 'textfield',
		        defaults: {
		        	anchor: '70%',
		        	labelWidth: 200
		        },
		        layout: 'anchor',
				items: [{
					fieldLabel: 'Drop the call if it is shorter than',
					name: 'shortNumber'
				}, {
					fieldLabel: 'Truncate if it is longer than',
					name: 'longNumber'
				}]
			}]
		}]
	}],
	
	
	populdateValue: function(valueObject){
		var me = this;
		if(this.rendered) {
			var fields = this.query('field');
			Ext.iterate(fields, function(field){
				if(valueObject[field.name] != null){
					field.setValue(valueObject[field.name]);
				}
			});
			var gridData = valueObject['discountRates'];
			if(gridData){
				 var grid = this.query('gridpanel')[0];
				 var store = grid.store;
				 store.removeAll(false);
				 Ext.iterate(gridData, function(r){
				 	if(r.type == 'HOURS') {
				 		var time = r.condition;
				 		time = time.split('-');
				 		store.add({
						 	id: r.id,
						 	starttime: Ext.Date.parse(time[0], 'H:i'),
						 	endtime: Ext.Date.parse(time[1], 'H:i'),
						 	discount: r.value 
						 });	
				 	} 
				 });
			}
			if(valueObject['holidayDiscountValue'] > 0){
				 this.query('checkbox[name=overrideHolidayDiscountValue]')[0].setValue(true);
			}
		}
	},
	
	buildExtraData: function(){
		var me = this;
		var data = [];
		var store = me.down('gridpanel').store;
		store.each(function(item){
			data.push({
				id: item.data.id,
				starttime: Ext.Date.format(item.data.starttime, 'H:i'),
				endtime: Ext.Date.format(item.data.endtime, 'H:i'),
				discount: item.data.discount
			});
		});
		return {offpeaktime:Ext.encode(data)};
	}
});	